<div class="main-section">
    <h1 class="main-section__title">Color</h1>

    <p class="main-section__intro">
        The full Material Design color palette is available.
    </p>
    
    <lx-component lx-title="Color palette" lx-path="/includes/css/color/palette.html">
        Sass variables are available for every color used in the <a href="https://design.google.com/spec/style/color.html#color-ui-color-palette" target="_blank">UI Color Palette</a>.
    </lx-component>

    <lx-component lx-title="Background and text colors" lx-path="/includes/css/color/helper.html">
        Each color are available as background color or text color css helpers.
    </lx-component>

    <lx-component lx-title="Primary and accent colors" lx-path="/includes/css/color/selection.html" lx-language="css" lx-is-open="true" lx-no-demo="true">
        As described in Material Design Guidelines, you should limit your selection of colors by choosing three color hues from the primary palette and one accent color from the secondary palette. The accent color may or may not need fallback options.<br />
        Primary and secondary colors are defined in <code>dist/scss/settings/_defaults.scss</code>.<br />
        Feel free to override it according to your needs.
    </lx-component>
</div>